<template>
  <div class="system-user-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <div class="form-rules-three-container">
          <el-form :model="state.form" :rules="state.rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
            <el-row :gutter="35">

              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="查询日期" prop="date">
                  <el-date-picker
                      v-model="state.form.date"
                      type="date"
                      placeholder="请选择日期"
                      size="default"
                      value-format="YYYYMMDD"
                  />
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="记录最早时间" prop="mirt">
                  <el-input v-model="state.form.mirt" placeholder="请输入记录最早时间" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="记录最晚时间" prop="mart">
                  <el-input v-model="state.form.mart" placeholder="请输入记录最晚时间" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="访问最小长度" prop="mial">
                  <el-input v-model="state.form.mial" placeholder="请输入访问最小长度" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="访问最大长度" prop="maal">
                  <el-input v-model="state.form.maal" placeholder="请输入访问最大长度" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="访问来源地址" prop="addr">
                  <el-input v-model="state.form.addr" placeholder="请输入访问来源地址" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="服务最小时长" prop="mibt">
                  <el-input v-model="state.form.mibt" placeholder="请输入服务最小时长" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="服务最大时长" prop="mabt">
                  <el-input v-model="state.form.mabt" placeholder="请输入服务最大时长" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="响应最小长度" prop="mirl">
                  <el-input v-model="state.form.mirl" placeholder="请输入响应最小长度" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="响应最大长度" prop="marl">
                  <el-input v-model="state.form.marl" placeholder="请输入响应最大长度"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="响应最小时长" prop="miet">
                  <el-input v-model="state.form.miet" placeholder="请输入响应最小时长" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="响应最大时长" prop="maet">
                  <el-input v-model="state.form.maet" placeholder="请输入响应最大时长"  clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="排序类型" prop="sort">
                  <el-select
                      v-model="state.form.sort"
                      clearable
                      placeholder="请选择排序类型"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in sortOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-form-item label="排序方式" prop="orde">
                  <el-select
                      v-model="state.form.orde"
                      clearable
                      placeholder="请选择排序方式"
                      style="width: 240px"
                  >
                    <el-option
                        v-for="item in ordeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                <el-button size="default" type="primary" class="ml10"   @click="searchList">
                  <el-icon>
                    <ele-Search />
                  </el-icon>
                  查询
                </el-button>
                <el-button size="default"  class="ml10"   @click="resetQuery">
                  <el-icon><ele-Refresh /></el-icon>重置
                </el-button>

              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--        <el-row :gutter="20">
                  <el-col :span="6"><div class="grid-content ep-bg-purple" />
                    <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
                    <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                  </el-col>
                  <el-col :span="6"><div class="grid-content ep-bg-purple" />
                    <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
                    <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                  </el-col>
                  <el-col :span="6"><div class="grid-content ep-bg-purple" />
                    <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
                    <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                  </el-col>
                  <el-col :span="6"><div class="grid-content ep-bg-purple" />
                    <span style="margin-top: 5px;color: #606266;">响应最小时长：</span>
                    <el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
                  </el-col>
                </el-row>-->




      </div>
      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="record_time" label="记录时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="access_leng" label="访问长度" show-overflow-tooltip></el-table-column>
        <el-table-column prop="access_addr" label="访问地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="access_meth" label="访问方法" show-overflow-tooltip></el-table-column>
        <el-table-column prop="access_path" label="访问路径" show-overflow-tooltip></el-table-column>
        <el-table-column prop="backen_addr" label="服务地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="backen_code" label="服务状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="backen_time" label="服务时长" show-overflow-tooltip></el-table-column>
        <el-table-column prop="return_leng" label="响应长度" show-overflow-tooltip></el-table-column>

        <el-table-column prop="return_code" label="响应状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="entire_time" label="响应时长" show-overflow-tooltip></el-table-column>

        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
            >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="onHandleSizeChange"
          @current-change="onHandleCurrentChange"
          class="mt15"
          :pager-count="5"
          :page-sizes="[10, 20, 30]"
          v-model:current-page="state.tableData.param.pageNum"
          background
          v-model:page-size="state.tableData.param.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total"
      >
      </el-pagination>
    </el-card>
<!--    <UserDialog ref="userDialogRef" @refresh="getTableData()" />-->
    <serverDialog ref="serverDialogRef" />

  </div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {getServerLst,getServerDetail} from '/@/api/cec/bdst';

// 引入组件
const serverDialog = defineAsyncComponent(() => import('/@/views/cec/server/dialog.vue'));

// 定义变量内容
const serverDialogRef = ref();
const sortOptions=[ {
  value: 'record_evid',
  label: '事件号码',
},
  {
    value: 'record_time',
    label: '记录时间',
  },
  {
    value: 'access_leng',
    label: '访问长度',
  },
  {
    value: 'backen_time',
    label: '服务时长',
  },
  {
    value: 'return_leng',
    label: '响应长度',
  },
  {
    value: 'entire_time',
    label: '响应时长',
  }
]
const ordeOptions=[{
  value: 'asc',
  label: '升序',
},
  {
    value: 'desc',
    label: '降序',
  }
]
// debugger
let now = new Date();
let yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
let month=yesterday.getMonth()+1;
let day=yesterday.getDate();

let monthStr="";
let dayStr="";
if(Number(month)<10){
  monthStr='0'+month;
}else{
  monthStr=month+'';
}
if(Number(day)<10){
  dayStr='0'+day;
}else{
  dayStr=day+'';
}

let  yesterdayDate = yesterday.getFullYear()+monthStr +dayStr;
console.log(dayStr,yesterdayDate)

const state = reactive({
  form: { date: yesterdayDate, size: '5', page: '1'
    , mirt: '' , mart: '', mial: '', maal: '', addr: '', mibt: '', mabt: '', mirl: '', marl: '',miet:'',
    maet: '',  sort: '', orde: ''},
  rules: {
    time: { required: true, message: '请输入当前日期', trigger: 'blur' },
    size: { required: true, message: '请输入页面行数', trigger: 'blur' },
    page: { required: true, message: '请输入页面页数', trigger: 'blur' },
  },
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  },
});

// 初始化表格数据
const getTableData = async () => {
  state.tableData.loading = true;
  // const result=getServerLst(state.form);
  state.form.date=state.form.date==''?null:state.form.date;
  state.form.size=state.tableData.param.pageSize;
  state.form.page=state.tableData.param.pageNum;

  state.form.mirt=state.form.mirt==''?null:state.form.mirt;
  state.form.mart=state.form.mart==''?null:state.form.mart;
  state.form.mial=state.form.mial==''?null:state.form.mial;
  state.form.maal=state.form.maal==''?null:state.form.maal;
  state.form.addr=state.form.addr==''?null:state.form.addr;
  state.form.mibt=state.form.mibt==''?null:state.form.mibt;
  state.form.mabt=state.form.mabt==''?null:state.form.mabt;
  state.form.mirl=state.form.mirl==''?null:state.form.mirl;
  state.form.marl=state.form.marl==''?null:state.form.marl;
  state.form.miet=state.form.miet==''?null:state.form.miet;
  state.form.maet=state.form.maet==''?null:state.form.maet;
  state.form.sort=state.form.sort==''?null:state.form.sort;
  state.form.orde=state.form.orde==''?null:state.form.orde;

 /* const result={
    "code": 0,
    "data": {
      "info": [
        {
          "access_addr": "10.45.65.6",
          "access_leng": 5208,
          "access_meth": "POST",
          "access_path": "/api/workflow/reqform/requestOperation",
          "backen_addr": "10.45.70.7:8081",
          "backen_code": 200,
          "backen_time": 1146,
          "entire_time": 1182,
          "record_evid": 850086,
          "record_time": "2023-06-06 16:56:11",
          "return_code": 200,
          "return_leng": 640
        },
        {
          "access_addr": "10.45.64.81",
          "access_leng": 5850,
          "access_meth": "POST",
          "access_path": "/service/signlog/client/stat/1686010217",
          "backen_addr": "127.0.0.1:31002",
          "backen_code": 200,
          "backen_time": 1139,
          "entire_time": 1143,
          "record_evid": 826801,
          "record_time": "2023-06-06 08:10:18",
          "return_code": 200,
          "return_leng": 121
        }
      ],
      "page": 20,
      "size": 2,
      "tota": 51
    },
    "msgs": "ok"
  }*/
  //传时间 和 id
  const {code,msgs,data}=await  getServerLst(state.form);
  if(code===0){
    console.log(data)
    state.tableData.data = data.info;
    state.tableData.total = data.tota;
    setTimeout(() => {
      state.tableData.loading = false;
    }, 500);
  }

};
const resetQuery=()=>{
  state.form.date=yesterdayDate;
  state.form.mirt='';
  state.form.mart='';
  state.form.mial='';
  state.form.maal='';
  state.form.addr='';
  state.form.mibt='';
  state.form.mabt='';
  state.form.mirl='';
  state.form.marl='';
  state.form.miet='';
  state.form.maet='';
  state.form.sort='';
  state.form.orde='';
  getTableData();
}
// 打开新增用户弹窗
const onOpenAddUser = (type: string) => {
  serverDialogRef.value.openDialog(type);
};
// 打开修改用户弹窗
const onOpenEditUser = (type: string, row: any) => {
  console.log("----------------")
  console.log(row)
  serverDialogRef.value.openDialog(type, row.record_evid,state.form.date);
};
// 删除用户
// const onRowDel = (row: RowUserType) => {
// 	ElMessageBox.confirm(`此操作将永久删除账户名称：“${row.userName}”，是否继续?`, '提示', {
// 		confirmButtonText: '确认',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(() => {
// 			getTableData();
// 			ElMessage.success('删除成功');
// 		})
// 		.catch(() => {});
// };
// 分页改变
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  getTableData();
};
const formRulesThreeRef = ref();
//查询
const searchList=async ()=>{
  //校验
  const valid = await formRulesThreeRef.value.validate().catch(() => {});
  if (!valid) return false;
  try {
    getTableData();
  } catch (error: any) {
    // useMessage().error(error.msg);
    ElMessage.warning(error.msg);
  } finally {

  }


}
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    .el-table {
      flex: 1;
    }
  }
}
</style>
